<template>
  <div class="analyze-container">
    <!-- 图表区域 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <analyze-view
          ref="classifyChart"
          title="图片分类分布"
          :chart-data="classifyData"
          chart-type="pie"
          x-field="classifyName"
          y-field="count"
        />
      </el-col>

      <el-col :span="12">
        <analyze-view
          ref="sizeChart"
          title="图片大小分布"
          :chart-data="sizeData"
          chart-type="pie"
          x-field="sizeRange"
          y-field="count"
        />
      </el-col>

      <el-col :span="12">
        <analyze-view
          ref="tagChart"
          title="图片标签分布"
          :chart-data="tagData"
          chart-type="bar"
          x-field="tag"
          y-field="count"
        />
      </el-col>

      <el-col :span="12">
        <analyze-view
          ref="userChart"
          title="用户上传趋势"
          :chart-data="userData"
          chart-type="line"
          x-field="period"
          y-field="count"
        />
      </el-col>

      <el-col :span="24">
        <el-card>
          <div class="chart-title">空间使用情况</div>
          <el-progress
            v-if="usageData.sizeUsageRatio"
            :text-inside="true"
            :stroke-width="20"
            :percentage="usageData.sizeUsageRatio * 100"
            status="success"
          >
            已使用 {{ formatFileSize(usageData.usedSize) }} / 总空间
            {{ formatFileSize(usageData.maxSize) }}
          </el-progress>
          <el-progress
            v-if="usageData.countUsageRatio"
            :text-inside="true"
            :stroke-width="20"
            :percentage="usageData.countUsageRatio * 100"
            status="warning"
            style="margin-top: 20px"
          >
            图片数量 {{ usageData.usedCount }} / {{ usageData.maxCount }}
          </el-progress>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import AnalyzeView from '@/components/AnalyzeView.vue'
import {
  getSpaceCategoryAnalyzeAPI,
  getSpaceSizeAnalyzeAPI,
  getSpaceTagAnalyzeAPI,
  getSpaceUsageAnalyzeAPI,
  getSpaceUserAnalyzeAPI,
} from '@/api/spaceAnalyze'
import formatFileSize from '@/utils/formatFileSize'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()

const spaceId = route.query.spaceId

const classifyData = ref([])
const sizeData = ref([])
const tagData = ref([])
const userData = ref([])
const usageData = ref({})

// 图表引用用于 resize 时重绘
const classifyChart = ref(null)
const sizeChart = ref(null)
const tagChart = ref(null)
const userChart = ref(null)

async function fetchData() {
  if (!spaceId) {
    ElMessage.error('请选择空间')
    return router.back()
  }
  const params = {
    queryPublic: false,
    queryAll: false,
    spaceId: spaceId,
    timeDimension: 'day',
  }
  // 分类分析
  const classifyRes = await getSpaceCategoryAnalyzeAPI(params)
  classifyData.value = classifyRes.data || []

  // 大小分析
  const sizeRes = await getSpaceSizeAnalyzeAPI(params)
  sizeData.value = sizeRes.data || []

  // 标签分析
  const tagRes = await getSpaceTagAnalyzeAPI(params)
  tagData.value = tagRes.data || []

  // 用户行为分析
  const userRes = await getSpaceUserAnalyzeAPI(params)
  userData.value = userRes.data || []

  // 空间使用情况
  const usageRes = await getSpaceUsageAnalyzeAPI(params)
  usageData.value = usageRes.data || {}
}

onMounted(() => {
  fetchData()
})

onBeforeUnmount(() => {})
</script>

<style scoped>
.analyze-container {
  padding: 20px;
}
.mode-card {
  margin-bottom: 20px;
}
.chart-title {
  font-size: 18px;
  margin-bottom: 10px;
}
</style>
